<template>
	<div class="list">
		<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
		<el-checkbox-group class="listData" v-model="selectIds" @change="handleCheckedCitiesChange">
			<RecycleScroller class="scroll-warp" :items="store.list" key-field="id" :item-size="40">
				<template #default="{ item }">
					<el-checkbox :label="item.id" :key="item.id">
						<span class="img-icon"><img :src="item.headImg" alt="" /></span><span>{{item.name}}</span>
					</el-checkbox>
				</template>
				<!-- <el-checkbox v-for="item in store.list" :label="item.id" :key="item.id">
            <span class="img-icon"><img :src="item.headImg" alt="" /></span><span>{{item.name}}</span>
          </el-checkbox> -->
			</RecycleScroller>
		</el-checkbox-group>
	</div>
</template>
<script>
import { store } from "../storeData"
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
export default {
  props: {
    userList: {
      type: Array,
      default:()=>[]
    }
  },
  components: {
    RecycleScroller
  },
  data() {
    return {
      checkAll: false,
      selectIds:[],
      isIndeterminate: false,
      store
      // userList:[]
    };
  },
  watch: {

    // userList: {
    //    handler(v) {
    //      this.userList = v;
    //   },
    //    immediate:true
    // }
  },
  methods: {
    handleCheckAllChange(val) {
      this.selectIds = val ? store.list.map((item) => { return item.id }) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === store.list.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < store.list.length;
    }
  },
  created() {

  }
};
</script>

<style lang="scss" scoped>
.list{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}
.scroll-warp{
  width:200px;
  height:30vh;
  overflow: auto;
  border: solid 1px #eee;
}
.listData{
   display:flex;
   flex-direction: column;
   .img-icon{
     width:32px;
     height: 32px;
     border-radius: 4px;
     font-size:0px;
     img{
      width:100%;
      height:100%;
     }
   }
   ::v-deep(.el-checkbox){
     display: flex;
     justify-content: start;
     width:100%;
     height:40px;
     background-color: #eee;
     .el-checkbox__label{
      display: flex;
      align-items: center;
     }
   }
}
</style>
